<template>
  <view class="confirm-order">
    <!-- 停车场信息头部 -->
    <view class="parking-header">
      <view class="title">{{ parkingCarBuyInfo.name }}</view>
      <view class="address">{{ parkingCarBuyInfo.detailedAddress }}</view>
    </view>

    <!-- 订单信息表单 -->
    <view class="order-form">
      <!-- 车牌号选择 -->
      <u-cell-group>
        <u-cell
          title="车牌号"
          :value="carNumber"
          @click="addPlate"
          isLink
        ></u-cell>

        <!-- 预计停车时间选择 -->
        <u-cell
          title="预计停车时间"
          :value="startTime"
          @click="showStartTimePicker = true"
          isLink
        ></u-cell>

        <!-- 预计取车时间选择 -->
        <u-cell
          title="预计取车时间"
          :value="endTime"
          @click="showEndTimePicker = true"
          isLink
        ></u-cell>
      </u-cell-group>

      <!-- 停车时长和费用 -->
      <view class="parking-info" v-show="startTime !== '请选择' && endTime !== '请选择'">
        <view class="duration"
          >预计停车时长：<text class="highlight">{{ duration }}小时</text></view
        >
        <view class="fee"
          >费用合计：<text class="highlight">¥{{ totalFee }}</text></view
        >
      </view>
    </view>

    <!-- 底部预订按钮 -->
    <view class="footer">
      <u-button type="warning" text="立即预订" @click="handleSubmit"></u-button>
    </view>

    <!-- 时间选择器 -->
    <u-datetime-picker
      :show="showStartTimePicker"
      :value="startTimeStamp"
      mode="datetime"
      @confirm="confirmStartTime"
      @cancel="closeStartTimePicker"
      :min-date="new Date().getTime()"
    ></u-datetime-picker>

    <u-datetime-picker
      :show="showEndTimePicker"
      :value="endTimeStamp"
      mode="datetime"
      @confirm="confirmEndTime"
      @cancel="closeStartTimePicker"
      :min-date="new Date().getTime()"
    ></u-datetime-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      carNumber: "选择车牌号",
      startTime: "请选择",
      endTime: "请选择",
      startTimeStamp: "",
      endTimeStamp: "",
      duration: 0,
      totalFee: 0,
      showStartTimePicker: false,
      showEndTimePicker: false,

      parkingCarBuyInfo: {},
    };
  },
  onLoad() {
    console.log(uni.getStorageSync("parkingCarBuyInfo"));
    this.parkingCarBuyInfo = uni.getStorageSync("parkingCarBuyInfo");
    uni.$on("licenseNumberFun", this.licenseNumberFun);
  },
  onUnload() {
    uni.$off("licenseNumberFun", this.licenseNumberFun);
  },
  methods: {
    addPlate() {
      // 跳转到添加车牌页面
      uni.navigateTo({
        url: "/pages/user/selectLicensePlate",
      });
    },
    licenseNumberFun(plateNumber) {
      console.log(plateNumber);
      this.carNumber = plateNumber;
    },
    // 确认开始时间
    confirmStartTime(value) {
      this.startTimeStamp = value.value;
      this.startTime = this.formatDateTime(value.value);
      this.calculateDuration();
      this.showStartTimePicker = false;
    },
    closeStartTimePicker() {
      this.showStartTimePicker = false;
      this.showEndTimePicker = false;
    },

    // 确认结束时间
    confirmEndTime(value) {
      this.endTimeStamp = value.value;
      this.endTime = this.formatDateTime(value.value);
      this.calculateDuration();
      this.showEndTimePicker = false;
    },

    // 计算停车时长和费用
    calculateDuration() {
      const hours =
        (this.endTimeStamp - this.startTimeStamp) / (60 * 60 * 1000);
      this.duration = Math.ceil(hours);
      this.totalFee = this.duration * this.parkingCarBuyInfo.ratePerHour; // 假设每小时3元
    },

    // 格式化日期时间
    formatDateTime(timestamp) {
      const date = new Date(timestamp);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(date.getDate()).padStart(2, "0")} ${String(
        date.getHours()
      ).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
    },
    // 提交订单
    handleSubmit() {
      this.$httpReq
        .saveBookingOrderDetails({
          licensePlate: this.carNumber,
          parkingIotId: this.parkingCarBuyInfo.id,
          estParkStartTime: this.startTime,
          estParkEndTime: this.endTime,
        })
        .then((res) => {
          console.log("预订成功", res.data.payInfo);
		  let params = res.data.payInfo
		  
		  wx.openEmbeddedMiniProgram({
		  	appId: 'wxef277996acc166c3',
		  	extraData: params
		  })
          // 跳转到支付页面
          // wx.requestPayment({
          //   ...JSON.parse(res.data.payInfo),
          //   success: (res) => {
          //     uni.showToast({
          //       title: "预订成功",
          //       icon: "success",
          //     });
          //     uni.switchTab({
          //       url: "/pages/index/index",
          //     });
          //   },
          //   fail: (res) => {
          //     console.log("支付失败", res);
          //   },
          // });
		  

          // setTimeout(() => {
          //   uni.switchTab({
          //     url: "/pages/index/index",
          //   });
          // }, 1000);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.confirm-order {
  min-height: 100vh;
  background-color: #f5f5f5;

  .parking-header {
    background: #333;
    color: #fff;
    padding: 20px;

    .title {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .address {
      font-size: 14px;
      opacity: 0.8;
    }
  }

  .order-form {
    margin-top: 10px;

    .parking-info {
      background: #fff;
      margin-top: 10px;
      padding: 15px;

      .highlight {
        color: #f56c6c;
        font-weight: bold;
      }
    }
  }

  .agreement {
    padding: 20px;

    .link {
      color: #2979ff;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: #fff;
  }

  .car-number-popup {
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #eee;
    }
  }
}
</style> 